<template>
    <div class="loginBox">
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            status-icon
            :rules="rules"
            label-width="80px"
            class="demo-ruleForm"
        >
            <h2>后台管理系统</h2>
            <el-form-item label="账号：" prop="userName">
            <el-input v-model="ruleForm.userName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码：" prop="password">
            <el-input
                v-model="ruleForm.password"
                type="password"
                autocomplete="off"
            />
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)" class="loginBtn"
                >登录</el-button
            >
            <el-button @click="resetForm"  class="loginBtn">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts">
import { FormInstance } from 'element-plus'
import { defineComponent, reactive, ref, toRefs } from 'vue'
import {LoginData} from '../type/login'
import {login} from '../request/api'
import { useRouter } from 'vue-router'
export default defineComponent({
    setup () {
        const data=reactive(new LoginData())
        const rules={
            userName: [
                { required: true, message: '请输入你的账号', trigger: 'blur' },
                { min: 3, max: 10, message: '账号长度在3到10之间', trigger: 'blur' },
            ],
            password: [
                { required: true, message: '请输入你的密码', trigger: 'blur' },
                { min: 3, max: 10, message: '密码长度在3到10之间', trigger: 'blur' },
            ],
        }
        // 登录
        const ruleFormRef = ref<FormInstance>()
        const router=useRouter() //$router
        const submitForm = (formEl: FormInstance | undefined) => {
            if (!formEl) return
            // 对表单的内容进行验证
            // validate布尔类型,为true表示验证成功,反之失败
            formEl.validate((valid) => {
                if (valid) {
                    // console.log('submit!')
                    login(data.ruleForm).then((res)=>{
                        // console.log(res);
                        // 将token进行保存
                        localStorage.setItem("token",res.data.token)
                        // 跳转页面
                        router.push('/')
                    })
                } else {
                    console.log('error submit!')
                    return false
                }
            })
        }
        // 重置
        const resetForm=()=>{
            data.ruleForm.userName=""
            data.ruleForm.password=""
        }
        return {...toRefs(data),rules,resetForm,ruleFormRef,submitForm}
    }
})
</script>

<style lang="scss" scoped>
.loginBox{
    width: 100%;
    height: 100%;
    background: url("../assets/bg.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    text-align: center;
    .demo-ruleForm{
        width: 500px;
        margin: 200px auto;
        background-color: #fff;
        padding: 40px;
        border-radius: 20px;
    }
    .loginBtn{
        width: 48%;
    }
    h2{
        margin-bottom: 10px;
    }
}
</style>